<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>基于Ajax灾区物资运输管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <div class="layui-carousel" id="test1">
                <div carousel-item id="queryCarouseWithStatus">
                    <div><img src="../images/bg.jpeg" style="object-fit: cover; width: 100%; height: 100%;"></div>
                    <div><img src="../images/a7f2a55a8babffd17394c49aefc466bb.jpeg" style="object-fit: cover; width: 100%; height: 100%;"></div>
                </div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">新闻资讯</div>
                <div class="layui-card-body ">
                    <div id="newsInfo">
                    </div>
                    <div id="newsPage"></div>
                    <input type="hidden" id="page" value="1">
                    <input type="hidden" id="limit" value="10">
                </div>
            </div>
        </div>
    </div>

    <%-- 弹出层 --%>
    <div style="display: none; padding: 20px;" id="newsInfoLayer">

    </div>
</div>
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    var count = "";
    function getNewsInfo() {
        page = $("#page").val();
        limit = $("#limit").val();
        $.ajax({
            url: './news/getNewsInfo',
            type: 'post',
            data: {page: page, limit: limit},
            dataType: 'json',
            async: false,
            success: function(res) {
                count = res.data.count; // 获取总数
                // dom操作
                // 清空节点
                $("#newsInfo").empty();
                $.each(res.data.list, function(index, item){
                    var ctn = '<a href="javascript:;" data-id="'+item.id+'" onclick="showNewsInfo(this)">'+ item.title +'</a><br>';
                    $("#newsInfo").append(ctn);
                })
            },
        });
    }

    function showNewsInfo(obj) {
        var id = $(obj).data("id");
        $.ajax({
           url: './news/getNewsInfoById',
           type: 'post',
           data: {id: id},
           dataType: 'json',
           success: function(res) {
               $("#newsInfoLayer").empty();
               $("#newsInfoLayer").append(res.data.content);
               let indexNewsInfoLayer = layer.open({
                   title: '新闻资讯',
                   type: 1,
                   skin: 'layui-layer-rim',
                   area: ['650px', '400px'],
                   content: $("#newsInfoLayer"),
                   maxmin: true,
                   minStack: false, //最小化不堆叠在左下角
                   id: 'page1', //定义 ID，防止重复弹出
               });
           }
        });
    }

    layui.use(['carousel', 'laypage'], function(){
        var laypage = layui.laypage
        var carousel = layui.carousel;
        //建造实例
        // var ins = carousel.render({
        //     elem: '#test1'
        //     ,width: '100%' //设置容器宽度
        //     ,arrow: 'always' //始终显示箭头
        //     //,anim: 'updown' //切换动画方式
        // });

        // 加载轮播图片
        $.ajax({
            url: './carouselimg/queryCarouseWithStatus',
            type: 'post',
            dataType: 'json',
            success: function(res) {
                $("#queryCarouseWithStatus").empty();
                $.each(res.data, function(i, v) {
                    let div = '<div><img src="../carousel/'+ v.imgName +'" style="object-fit: cover; width: 100%; height: 100%;"></div>';
                    $("#queryCarouseWithStatus").append(div);
                })
                var ins = carousel.render({
                    elem: '#test1'
                    ,width: '100%' //设置容器宽度
                    ,arrow: 'always' //始终显示箭头
                    //,anim: 'updown' //切换动画方式
                });
            }
        })

        // 加载新闻数据
        getNewsInfo();

        // 分页组件渲染
        laypage.render({
            elem: 'newsPage',
            count: count,
            layout: ['prev', 'page', 'next', 'refresh', 'skip'],
            jump: function(data, first) {
                $("#page").val(data.curr); // 当前页
                if(!first) {
                    getNewsInfo();
                }
            }
        });
    });
</script>
</html>
